<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝联盟</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <link rel="stylesheet" href="master.css">
</head>

<body>
    <div class="row content">
        <!-- 登陆 -->
        <div class="col-md-4 zd">
            <ul>
                <li><a href="#" class="qin">亲，请登录</a></li>
                <li><a href="#">我要注册</a></li>
                <li><a href="#">我要联盟</a><span class="jt"><b>你好啊</b></span>
                    <ul>
                        <li><a href="#">我的选品库1</a></li>
                        <li><a href="#">我的选品库1</a></li>
                        <li><a href="#">我的选品库1</a></li>
                        <li><a href="#">我的选品库1</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="col-md-8 yb">
            <ul>
                <li><a href="#">阿里妈妈首页</a></li>
                <li><a href="#">营销平台</a><span class="at"><b>你好啊</b></span>
                    <ul>
                        <li><a href="#">我的选品库3</a></li>
                        <li><a href="#">我的选品库3</a></li>
                        <li><a href="#">我的选品库2</a></li>
                        <li><a href="#">我的选品库2</a></li>
                    </ul>
                </li>
                <li><a href="#">数据中心</a><span class="at"><b>你好啊</b></span>
                    <ul>
                        <li><a href="#">我的选品库2</a></li>
                        <li><a href="#">我的选品库2</a></li>
                        <li><a href="#">我的选品库2</a></li>
                        <li><a href="#">我的选品库2</a></li>
                    </ul>
                </li>
                <li><a href="#">媒体合作</a><span class="at"><b>你好啊</b></span>

                    <ul>
                        <li><a href="#">我的选品库4</a></li>
                        <li><a href="#">我的选品库4</a></li>
                        <li><a href="#">我的选品库2</a></li>
                        <li><a href="#">我的选品库2</a></li>
                    </ul>
                </li>
                <li><a href="#">万堂书院</a></li>
                <li><a href="#">服务</a><span class="ct"><b>你好啊</b></span>
                    <ul>
                        <li><a href="#">我的选品库5</a></li>
                        <li><a href="#">我的选品库5</a></li>
                        <li><a href="#">我的选品库2</a></li>
                        <li><a href="#">我的选品库2</a></li>
                    </ul>
                </li>

            </ul>
        </div>

        <!-- 登陆 -->
        <!-- 搜索框开始 -->
        <div class="seach">
            <div class="col-md-6 photo"><img src="" alt=""></div>
            <div style="">
                <form class="bs-example bs-example-form" role="form">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control bk" placeholder="请输入您要搜索的商品名称或链接">
                                <span class="input-group-btn">
                                    <button class="btn btn-default button" type="button">
                                        搜索
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 搜索框结束 -->

        <!-- 导航开始 -->
        <ul class="nav nav-pills daohang">
            <li role="presentation" class="active cd"><a href="#">首页</a>
                <div class="sidebar">
                    <ul class="nav nav-pills nav-stacked tupian">
                        <img src="images/dp.png" alt="">
                        <li><a href="#">超级搜索</a>
                            <p class="extension">商品筛选、取链、推广</p>
                        </li>

                        <li><a href="#">活动推广</a>
                            <img src="images/dp.png" alt="">
                            <p class="extension">商品筛选、取链、推广</p>
                        </li>
            </li>
            <li><a href="#">API</a>
                <img src="images/dp.png" alt="">

                <p class="extension">商品筛选、取链、推广</p>
            </li>
            </li>
            <li><a href="#">联盟APP</a>
                <img src="images/dp.png" alt="">
                <p class="extension">商品筛选、取链、推广</p>
            </li>
            </li>
        </ul>

    </div>

    </li>
    <li role="presentation"><a href="#">学堂</a>
    </li>
    <li role="presentation"><a href="#">开发者中心</a></li>
    <li role="presentation"><a href="#">社区</a></li>
    <li role="presentation"><a href="#">帮助中心</a></li>
    </ul>
    <!-- 导航结束 -->
    </div>

    <!-- 公告开始-->
    <div class="banner">
        <div class="content">
            <div class="loginbar ">
                <div class="row logins">
                    <div class="col-md-6 huiyuan"><a href="#">淘宝会员</a></div>
                    <div class="col-md-6 huiyuan"><a href="#">阿里妈妈会员</a></div>
                </div>
                <img src="images/gy.png" alt="..." class="img-circle">
                <button class="buttons">通过手机安全登录</button>
                <div class="pillsbw">
                    <ul class="nav nav-pills pillsaa ">
                        <li class="pill-j"><a href="#">公告</a>
                            <ul class="pill-n">
                                <li><a href="#">双11倒计时4小时，联盟APP热门商品推荐！</a></li>
                                <li><a href="#">双11倒计时4小时，联盟APP热门商品推荐！</a></li>
                                <li><a href="#">双11倒计时4小时，联盟APP热门商品推荐！</a></li>
                                <li><a href="#">双11倒计时4小时，联盟APP热门商品推荐！</a></li>
                            </ul>
                        </li>
                        <li class="pill-k"><a href="#">规则</a>
                            <ul class="pill-a" style="display: none;">
                                <li><a href="#">超级权益推广功能推广者端规范</a></li>
                                <li><a href="#">超级权益推广卖家端规范</a></li>
                                <li><a href="#">《淘宝客佣金计算规范》维权交易处理逻辑修订</a></li>
                                <li><a href="#">阿里妈妈全新淘宝客会员成长体系上线啦！</a></li>
                            </ul>
                        </li>
                        <li class="pill-l"><a href="#">教程</a>
                            <ul class="pill-s" style="display: none;">
                                <li><a href="#">亮瞎小白淘客的赚钱大法</a></li>
                                <li><a href="#">产品介绍之超级搜索来啦</a></li>
                                <li><a href="#">淘宝联盟APP 无线省钱赚钱利器</a></li>
                                <li><a href="#">淘宝客违规申诉锦囊</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 公告结束 -->

    <!-- 步骤开始 -->
    <div class="row step">
        <div class="col-md-1 step-a">
            <img src="images/buzhou.png" alt="">
            <h1>简单3步</h1>
            <br /> 轻松推广获取利益
        </div>
        <div class="col-md-1">
            <p>1.</p>
            <a href="#">注册登录</a>

            <br />
            <a href="#">淘宝联盟</a>

        </div>
        <div class="col-md-1">
            <p>2.</p>
            <a href="#">登记备案</a>
            <br />
            <a href="#">推广渠道</a>
        </div>
        <div class="col-md-1">
            <p>3.</p>
            <a href="#">获取代码</a>
            <br />
            <a href="#">投放赚钱</a>
        </div>
        <div class="col-md-1 course">
            <a href="#">更多教程</a>
        </div>

    </div>
    <!-- 步骤结束 -->
    <!-- 第一个 -->
    <div class="warp">
        <div class="recommend">
            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
            <h3>精品推荐</h3>
        </div>
        <div class="banners">
            <img src="images/tj.png" alt="">
        </div>

        <div class="recommend">
            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
            <h3>行业好货</h3>
        </div>
        <div class="banner-bw">
            <div class="banner-n">
                <a href="#"><img src="images/jh.png" alt="..." class="img-thumbnail img-th"></a>
                <a href="#"><img src="images/my.png" alt="..." class="img-thumbnail"></a>
            </div>
            <div class="banner-v">
                <a href="#"><img src="images/gy.png" alt="..." class="img-thumbnail img-th "></a>
                <a href="#"><img src="images/zt.png" alt="..." class="img-thumbnail"></a>
            </div>
        </div>

        <!-- 第一个 -->

        <!-- 第二个 -->
        <div class="clearfix"></div>
        <div class="recommend">
            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
            <h3>淘宝行业市场精选</h3>
        </div>
        <div class="banner-bx">
            <div class="banner-z">
                <a href="#"><img src="images/fash.jpg" alt="..." class="img-thumbnail img-th"></a>
                <a href="#"><img src="images/baby.png" alt="..." class="img-thumbnail img-th"></a>
                <a href="#"><img src="images/hc.png" alt="..." class="img-thumbnail img-th"></a>
                <a href="#"><img src="images/cdj.png" alt="..." class="img-thumbnail "></a>
                <a href="#"><img src="images/jyj.png" alt="..." class="img-thumbnail img-tc"></a>
                <a href="#"><img src="images/kdc.png" alt="..." class="img-thumbnail img-tc"></a>
                <a href="#"><img src="images/diy.jpg" alt="..." class="img-thumbnail img-tc"></a>
                <a href="#"><img src="images/gdsc.png" alt="..." class="img-thumbnail img-tr"></a>
            </div>
        </div>

        <!-- 第二个 -->
        <!-- 第三个 -->
        <div class="recommend">
            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
            <h3>特惠推荐</h3>
        </div>
        <div class="banner-bx">
            <div class="banner-x">
                <a href="#"><img src="images/cz.png" alt="..." class="img-thumbnail img-th"></a>
                <a href="#"><img src="images/fd.png" alt="..." class="img-thumbnail img-th"></a>
                <a href="#"><img src="images/tejia.png" alt="..." class="img-thumbnail"></a>

            </div>
        </div>
        <!-- 第三个 -->
        <div class="footer">
            <ul class="list-inline">
                <li><a href="#">联系客服</a></li>
                <li><a href="#">开放平台</a></li>
                <li><a href="#">法律声明</a></li>
                <li><a href="#">意见反馈</a></li>
                <li><a href="#">廉正举报</a></li>
                <li><a href="#">阿里妈妈版权所有 2007-2017</a></li>
                <li><a href="#">ICP证：浙B2-20070195</a></li>

            </ul>
            <ul class="list-inline footer-t">
                <li><a href="#">阿里巴巴集团</a></li><b>|</b>
                <li><a href="#">淘宝网</a></li><b>|</b>
                <li><a href="#">天猫</a></li><b>|</b>
                <li><a href="#">聚划算</a></li><b>|</b>
                <li><a href="#">廉正举报</a></li><b>|</b>
                <li><a href="#">全球速卖通</a></li><b>|</b>
                <li><a href="#">阿里巴巴国际交易市场</a></li><b>|</b>
                <li><a href="#">1688</a></li><b>|</b>
                <li><a href="#">阿里妈妈</a></li><b>|</b>
                <li><a href="#">飞猪</a></li><b>|</b>
                <li><a href="#">阿里云计算</a></li><b>|</b>
                <li><a href="#">yunOS</a></li><b>|</b>
                <li><a href="#">阿里通信</a></li><b>|</b>
                <li><a href="#">高德</a></li><b>|</b>
                <li><a href="#">uc</a></li>
                <li><a href="#">友盟</a></li><b>|</b>
                <li><a href="#">虾米</a></li><b>|</b>
                <li><a href="#">阿里星球</a></li><b>|</b>
                <li><a href="#">钉钉</a></li><b>|</b>
                <li><a href="#">支付宝</a></li>

            </ul>
            <img src="images/m.png" alt="">
            <img src="images/huiz.png" alt="">
            <img src="images/minj.png" alt="">

        </div>
    </div>

</body>
<script>
    $(".pill-j").hover(
        function () {
            $(".pill-n").show();
            $(".pill-a").hide();
            $(".pill-s").hide();

        }
    );
    $(".pill-k").hover(
        function () {
            $(".pill-n").hide();
            $(".pill-a").show();
            $(".pill-s").hide();

        }
    );
    $(".pill-l").hover(
        function () {
            $(".pill-n").hide();
            $(".pill-a").hide();
            $(".pill-s").show();

        }
    )
</script>

</html>